<template>
	<div class="system-user-dialog-container energy-dialog energy-from">
		<el-dialog center align-center v-model="state.dialog.isShowDialog" width="40%" @close="resetData">
			<template #header="{ titleClass }">
				<div :class="titleClass">{{ state.dialog.isAdd ? '新增岗位' : '修改岗位' }}</div>
			</template>
			<el-form ref="userDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
				<el-row :gutter="35">
					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="所属部门" prop="dept">
							<el-cascader
								ref="deptCascaderRef"
								:options="state.deptList"
								:props="{
									expandTrigger: 'hover',
									emitPath: false,
									value: 'id',
									label: 'deptName',
								}"
								placeholder="请选择部门"
								clearable
								class="w100"
								v-model="state.ruleForm.deptId"
								@change="changeDept"
							>
								<template #default="{ node, data }">
									<span>{{ data.deptName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col> -->

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="岗位名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入岗位名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="岗位编码" prop="code">
							<el-input v-model="state.ruleForm.code" placeholder="请输入岗位编码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="岗位状态" prop="status">
							<el-radio-group v-model="state.ruleForm.status">
								<el-radio :label="0">正常</el-radio>
								<el-radio :label="1">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="显示顺序" prop="sort">
							<el-input-number v-model="state.ruleForm.sort" controls-position="right" placeholder="请输入显示顺序"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="state.ruleForm.remark" type="textarea" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="flex row-center mt10 mb10">
				<div class="btn1" @click="onSubmit">
					<el-icon> <ele-Check /> </el-icon><span class="ml6">保 存</span>
				</div>
				<div class="btn3 ml10" @click="onCancel">
					<el-icon> <ele-Close /> </el-icon><span class="ml6">取 消</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref, nextTick } from 'vue';
import { usePostApi } from '/@/api/system/post/index';
import { ElNotification } from 'element-plus';
// import { useDeptApi } from '/@/api/system/dept';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
// const deptCascaderRef = ref();
const state = reactive({
	ruleForm: {
		id: '', // id
		// deptId: '', // 部门id
		// deptName: '', // 部门名称
		code: '', // 岗位编码
		name: '', // 岗位名称
		sort: 0, // 显示排序
		status: 0, //用户状态（0正常 1停用）
		remark: '', // 备注
	},
	// deptList: [], // 部门数据
	dialog: {
		isShowDialog: false,
		isAdd: true,
	},
	rules: {
		code: [{ required: true, message: '请输入岗位编码', trigger: 'blur' }],
		name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
		sort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
		status: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
	},
});

// 打开弹窗
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	// getDeptData();
	if (row) {
		state.ruleForm = {
			id: row.id,
			// deptId: row.deptId, // 部门id
			// deptName: row.deptName, // 部门名称
			code: row.code,
			name: row.name,
			sort: row.sort,
			status: row.status,
			remark: row.remark,
		};
		state.dialog.isAdd = false;
	} else {
		state.dialog.isAdd = true;
	}
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 初始化部门数据
// const getDeptData = async () => {
// 	const { data } = await useDeptApi().getListDept({});
// 	state.deptList = data;
// };

// 部门修改
// const changeDept = (val: any) => {
// 	console.log('val: ', val);
// 	const curNode = deptCascaderRef.value.getCheckedNodes()[0];
// 	state.ruleForm.deptName = curNode.label;
// };

// 表单清空
const resetData = () => {
	nextTick(() => {
		userDialogFormRef.value.resetFields();
		state.ruleForm = {
			id: '',
			// deptId: '', // 部门id
			// deptName: '', // 部门名称
			code: '',
			name: '',
			sort: 0,
			status: 0,
			remark: '',
		};
	});
};

// 新增
const doAdd = async () => {
	const data = await usePostApi().addPost(state.ruleForm);
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '新增岗位成功',
			position: 'top-right',
			type: 'success',
		});
		emit('refresh');
	}
};

// 编辑
const doEdit = async () => {
	const data = await usePostApi().updatePost(state.ruleForm);
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '修改岗位成功',
			position: 'top-right',
			type: 'success',
		});
		emit('refresh');
	}
};

// 提交
const onSubmit = () => {
	userDialogFormRef.value.validate((valid: any) => {
		if (valid) {
			state.dialog.isAdd ? doAdd() : doEdit();
		} else {
			ElNotification({
				title: '提示',
				message: '校验失败,请填写完整岗位信息',
				position: 'top-right',
				type: 'error',
			});
		}
		closeDialog();
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
	width: 100%;
	height: 60px;
	background-color: #5e8dff;
}

:deep(.el-dialog__header .el-dialog__title) {
	font-size: 20px;
	color: #fff;
}

:deep(.el-dialog__header .el-dialog__close) {
	color: #fff;
}
</style>
